<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, minimal-ui, viewport-fit=cover, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>gl-Noise • Plane</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body,
      html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
        height: 100%;
        overscroll-behavior-y: contain;
      }

      body {
        margin: 0;
        border: 0;
        padding: 0;
      }

      #text {
        color: white;
        text-align: center;
        padding: 5%;
        margin-bottom: 10%;
        font-family: sans-serif;
      }

      h1 {
        font-weight: lighter;
      }

      h5 {
        font-weight: bold;
      }

      #Acontainer {
        background-color: #3a4042;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      }

      #container {
        width: 100%;
        -webkit-perspective: 750;
      }

      #shape {
        position: relative;
        top: 120px;
        margin: 0 auto;
        width: 250px;
        height: 250px;
        -webkit-animation: spin 20s infinite linear;
        -webkit-transform-style: preserve-3d;
      }

      #shape > div {
        border: 1px solid #fff;
        position: absolute;
        width: 250px;
        height: 250px;
        -webkit-border-radius: 4px;
        -webkit-transition: -webkit-transform 2s;
      }

      #shape > div img {
        width: 100%;
        height: 100%;
      }

      /* This is where the 3D magic happens */
      @-webkit-keyframes spin {
        from {
          -webkit-transform: rotateY(0) rotateX(0);
        }
        to {
          -webkit-transform: rotateY(-360deg) rotateX(360deg);
        }
      }
      /* 3D positioning for each of the images/links */
      .one {
        -webkit-transform: rotateX(90deg) translateZ(125px);
      }

      .two {
        -webkit-transform: translateZ(125px);
      }

      .three {
        -webkit-transform: rotateY(90deg) translateZ(125px);
      }

      .four {
        -webkit-transform: rotateY(180deg) translateZ(125px);
      }

      .five {
        -webkit-transform: rotateY(-90deg) translateZ(125px);
      }

      .six {
        -webkit-transform: rotateX(-90deg) translateZ(125px);
      }
    </style>
  </head>
  <body type="0">
    <div id="Acontainer">
      <div id="container">
        <div id="shape">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
          <div class="four"></div>
          <div class="five"></div>
          <div class="six"></div>
        </div>
      </div>
      <div id="text">
        <h1>Oops, looks like your browser does not support WegGL!</h1>
        <h5>
          This site uses WegGL to display 3D Graphics. Like the cube you see
          above but rendered by your GPU!
        </h5>
      </div>
    </div>
  </body>
</html>
